<template>
	<view class="main-card">
		<u-grid col="2" @click="">
			<u-grid-item style="width: 35%; padding-top:23rpx;">
				<u-image :src="item.image" duration="500" radius="10rpx" height="220" width="220"></u-image>
			</u-grid-item>
			<u-grid-item style="width:60%;padding-top:10px;align-items:flex-start; gap:10rpx ">
				<view class="title">
					{{item.title}}
				</view>
				<view class="grade">
					5A
				</view>
				<u-row>
					<u-rate v-model="item.grade" size="30rpx"></u-rate>
					<view class="description-population">{{item.population}}评价过</view>
				</u-row>
				<u-row>
					<view class="description-population">距您{{item.distance}}</view>
				</u-row>
				<u-row>
					<view class="tags">
						<u-tag text="可定明日" size="mini" bgColor="#F1F7FD" borderColor="#B8CDF6" color="#6799F9"></u-tag>
						<u-tag text="随时退" size="mini" bgColor="#F1F7FD" borderColor="#B8CDF6" color="#6799F9"></u-tag>
					</view>
					<view class="price">
						￥{{item.price}}起
					</view>
				</u-row>
			</u-grid-item>
		</u-grid>
		<u-line length="93%" margin="10px 10px 10px 10px"></u-line>
	</view>
</template>

<script>
	import {
		methods
	} from '../../uni_modules/uview-ui/libs/mixin/mixin';

	export default {
		name: "list-card",
		props: {
			item: {
				type: Object,
				default () {
					return []
				},
				required: true,
			},
		},
		methods: {}
	}
</script>

<style>
	.main-card {
		height: 15vh;
		background-color: white;
		margin: 20rpx;
		border-radius: 20rpx;
	}

	.title {
		font-size: 30rpx;
	}

	.grade {
		background-color: #F2F2F2;
		color: #666666;
		width: 50rpx;
		height: 35rpx;
		border-radius: 10rpx;
		text-align: center;
		font-size: 20rpx;
		line-height: 35rpx;
	}

	.description-population {
		font-size: 20rpx;
		color: #A6A6A6;
	}

	.tags {
		display: flex;
		gap: 10rpx;
	}

	.price {
		margin-left: 130rpx;
		color: red;
	}
</style>